<template>
    <div id="app" v-loading="loading">
        <div class="title">分类列表</div>
        <el-row class="tableBtnTop">
            <div class="search" style="margin-left:0;">
                <el-input placeholder="请输入分类标题"
                    v-model="searchText"
                    @keyup.enter.native="searchWill"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"
                    >
                    </i>
                </el-input>
            </div>
            <el-button class="f1" @click="addSubject">添加分类</el-button>
            <el-button class="f1" @click="openAlias">别名管理</el-button>
        </el-row>
        <el-table :data="tableData" border>
            <el-table-column prop="user" label="分类图标" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        <img :src="scope.row.icon" class="square" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="count" label="所属项目" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.count_project_use
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="上架时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            countTrialDate(scope.row.time_created * 1000 )
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sell" label="近7天销量" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.count_task_use
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead noHandle">
                        {{
                            scope.row.sort
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status"
                            @change="handleStatusChange(scope.$index)"
                        >
                        </el-switch>
                    </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true" min-width="120">
                <template slot-scope="scope">
                <div class="tableBtn">
                    <a class="blue" @click="editSubject(scope.$index)">编辑分类</a>
                    <a class="blue" @click="$router.push('/task/project?id=' + scope.row.id)">下属项目</a>
                    <el-popconfirm title="真的要删除这条信息吗?"
                        @onConfirm="deleteSubject(scope.$index)"
                    >
                        <a class="gray" slot="reference">删除</a>
                    </el-popconfirm>
                </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination
                layout="prev, pager, next,total"
                :total="listNumsTotal"
                :page-size="10"
                :current-page.sync="curPage"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog title="提示" :visible.sync="classShow" width="500px">
            <el-form label-position="top" class="form">
                <el-row :gutter="25">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="分类名称">
                                <el-input
                                    v-model="editObj.name"
                                >
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="排序">
                                <el-input
                                    v-model="editObj.sort"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                        <el-form-item label="Icon">
                            <el-upload :show-file-list="false"  class="elupload"
                                :headers="{authorizedkey:authorized_key}"
                                :action="host + '/api/console/system/upload'"
                                :on-success="handleUploadSuccess"
                                :data="{
                                        PlatformIcon: editObj.count_project_use,
                                        bid: createBid()
                                }"
                            >
                                <img :src="imgShow(editObj.icon)" class="head" />
                            </el-upload>
                        </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="状态">
                                <el-switch v-model="editObj.status"></el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelPop">取 消</el-button>
                <el-button type="primary" @click="sumbitEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="aliasShow" width="650px">
            <div v-loading="aliaLoading">
              <template v-if="dynamicTags.length>0">
                <el-tag
                  :key="index"
                  v-for="tag,index in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                  @click="changeAlias(index)"
                  style="margin-bottom:13px;"
                  >
                  {{tag.name}}
                </el-tag>
              </template>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                style="margin-bottom:13px;"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import TaskSubject from './index.js';
    export default TaskSubject;
</script>
<style lang="scss" scoped>
    .title{
        margin-bottom:25px;
        font-size:21px;
        margin-top:65px;
    }
    .noHandle{
        cursor: auto;
    }
    .elupload{
        .head{
            display:block;
            width:70px;
            height:70px;
            border-radius:4px;
        }
    }
    .el-tag + .el-tag {
        margin-left: 10px;
      }
      .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }
</style>
